<template>
	<div class="CancelledOrder ">
		<div class="top"> <span>按票种查询：</span>
			<el-select v-model="value" placeholder="请选择" @change="opsel">
				<el-option v-for="(item, key, index) in res_orderlist.goods_name" :key="index" :label="item.type_name" :value="item.type_name">
				</el-option>
			</el-select>
		</div>
		<div class="bottom">
			<el-table :data="tableData6" :span-method="arraySpanMethod" :row-class-name="tableRowClassName" :cell-class-name="CellclassName"
			 :header-row-class-name="tabheadrow" border @cell-click="odetail" style="width: 100%">
				<el-table-column prop="order_id" width="180px" label="订单号">
				</el-table-column>
				<el-table-column prop="insert_time" width="210px" label="下单时间">
				</el-table-column>
				<el-table-column prop="go_time" width="210px" label="出行时间">
				</el-table-column>
				<el-table-column prop="people_number" width="80px" label="人数">
				</el-table-column>
				<el-table-column prop="money" label="金额">
				</el-table-column>
				<el-table-column prop="" width="100px" label="操作">
					详情
				</el-table-column>
			</el-table>
			<div class="total" v-show="page.total!=0">
				<div class="to" style="width: 300px;">合计</div>
				<div class="to" style="width: 80px;">{{totalnum}}</div>
				<div class="to" style="width: 277px;">
					<div style="width: 175px;">{{totalmoney}}</div>
				</div>
			</div>
			<page v-if="page.total!=0"></page>
		</div>
		<odetail v-show="res_odetaildata.show"></odetail>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import api from '../../fetch/api'
	import odetail from "../../components/odetail.vue";
	import page from "../../components/page.vue";
	export default {
		data() {
			return {
				totalnum: 0,
				totalmoney: 0,
				pageList: {},
				value: '',
				tableData6: [ ]
			};
		},
		components: {
			odetail,
			page
		},
		mounted() {
			this.order(1, 1)
		},
		computed: {
			...mapGetters([
				'token',
				'res_orderlist',
				'res_odetaildata',
				'page',
			])
		},
		methods: {
			...mapActions({
				getres_orderlist: 'getres_orderlist',
				getres_odetaildata: 'getres_odetaildata',
				getpage: 'getpage'
			}),
			// 票种查询
			opsel() {
				this.order(1, 1)
			},
			// 关闭弹框
			odetailclsoe() {
				this.odetailshow = false;
			},
			odetail(row, column, cell, even) {
				this.orderDetail({
					token: this.token, //	String	 header传入
					type: row.type, //	Number	 type=2景区,type=3酒店 允许值: 2, 3
					order_id: row.order_id, //	String	 订单号
					channel_id: row.channel_id, //	Int	 公司ID
					time: row.go_time, //	String	 出行时间
				})
			},
			// 订单详情
			orderDetail(req) {
				this.$api.GetorderDetail(req)
					.then(res => {
						if (res.code === 200) {
							res.result['show'] = true;
							this.getres_odetaildata(res.result)
						}
					})
			},
			// 订单列表
			order(type, page) {
				this.$api.Getorder({
						token: this.token,
						type: type,
						page: page,
						goods_name:this.value
					})
					.then(res => {
						if (res.code === 200) {
							this.getres_orderlist(res)
							this.update()
						} else {

					this.getpage('');
						}
					})
			},
			update(){
				this.tableData6 = this.res_orderlist.result.data;
				this.totalnum=0;
				this.totalmoney=0;
				for (var i = 0; i < this.tableData6.length; i++) {
					this.totalnum += this.tableData6[i].people_number;
					this.totalmoney += this.tableData6[i].money;
				}
				this.pageList = {
					total: this.res_orderlist.result.total, // String 总共数据条数
					per_page: this.res_orderlist.result.per_page, // String 每页数据条数
					current_page: this.res_orderlist.result.current_page, // String 当前第几页
					last_page: this.res_orderlist.result.last_page, // String 最后一页
				}
				this.getpage(this.pageList);
			},
			// 分页
			getpagelist(res) {
				this.order(1, res);
			},
			arraySpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (row.id === "合计") {
					if (columnIndex === 0) {
						return [1, 4];
					}
				}

			},

			tableRowClassName({
				row,
				rowIndex,
				columnIndex
			}) {
				if (rowIndex % 2 === 0) {
					return 'success-row';
				} else if (row.id === "合计") {
					return 'oneend-row';
				} else {
					return 'warning-row';
				}

				return '';
			},
			CellclassName({
				row,
				rowIndex,
				columnIndex
			}) {
				if (rowIndex % 2 === 0) {
					if (columnIndex != 0 && columnIndex != 2) {
						return 'cell-row';

					}
				}
				return ""
			},
			tabheadrow({
				row,
				rowIndex,
				columnIndex
			}) {
				return "tabhead-row"
			}
		}
	};
</script>

<style lang="less">
	.CancelledOrder {
		padding: 30px 20px;
		box-sizing: border-box;


		.top {
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		.bottom {

			table tr td .cell,
			.el-table th>.cell {
				text-align: center;
				color: #000;
				height: 30px;
				line-height: 30px;
			}

			.el-table--border,
			.el-table--group,
			.el-table--border td,
			.el-table--border th,
			.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
				border-color: #8b8b8b;
			}

			.el-table--border{
				border: 1px solid #c5c5c5;
			}
			.el-table--border::after,
			.el-table--group::after,
			.el-table::before {
				display: none;
			}

			.el-table td,
			.el-table th {
				height: 30px;
				padding: 0;
				line-height: 30px;
			}

			.el-table .warning-row {
				background: #ffffcc;
			}

			.el-table .success-row {
				background: #cfc;
			}

			.el-table .oneend-row {
				background: #e4e4e4;
			}

			.el-table thead tr {
				background: #000 !important;
			}

			.el-table .cell-row {
				background: #fff !important;
			}
		}

	}
</style>
